﻿
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link href="~/Scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .layui-table-tool-self {
            display: none;
        }
    </style>
</head>
<body>

    <div class="layui-inline ">
        姓名：
        <div class="layui-inline ">
            <input class="layui-input layui-input-inline" name="name" id="name" />
        </div>
        <button type="button" id="btnSearch" class="layui-btn layui-btn-primary">查询</button>
        <button type="button" class="layui-btn  layui-btn-normal" onclick="add()">添加</button>
    </div>

    <table class="layui-hide" id="demo" lay-filter="test">
    </table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看2</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑3</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除4</a>
    </script>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/layui-v2.5.6/layui/layui.js" asp-append-version="true"></script>
    <script>
        layui.config({
            version: true //默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
        });

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格

            querylist = function () {
                var name = $("#name").val();
                //执行一个 table 实例
                table.render({
                    elem: '#demo'
                    , height: 520
                    , url: '/Permission/GetUserList?name=' + name //数据接口
                    //, where: {
                    //    name: name
                    //    , Sex: '1'
                    //    , Address: '河北沧州铁狮子'
                    //}
                    , title: '用户表'
                    , page: true //开启分页
                  //  , toolbar: 'default' //开启头工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , limit: 3
                    , limits: [3, 6, 9, 12]
                    , cols: [[ //表头
                        { type: 'checkbox', fixed: 'left' }//锁定第一列
                        , { field: 'Id', title: 'ID', width: 80 }
                        , { field: 'UserName', title: '用户名', width: 80 }
                        , { field: 'Experience', title: '积分', width: 90 }
                        , {
                            field: 'Sex', title: '性别', width: 680, templet: function (row) {
                                var tmpSex = row.Sex == 1 ? "男" : "女";
                                return tmpSex;

                                //var tmpHtml = "<input style='width:200px;' class=\"layui-input layui-input-inline\" name=\"name\" id=\"name\" /> <button onclick=\"delete(" + row.id + ")\">测试</button>";
                                //return tmpHtml;
                            }
                        }
                        , { field: 'Score', title: '评分', width: 80, }
                        , { field: 'City', title: '城市', width: 150 }
                        , { field: 'Sign', title: '签名', width: 200 }
                        , { fixed: 'right',title:"操作", width: 200, align: 'center', toolbar: '#barDemo' }
                    ]],
                    done: function () {
                        //表格绑定数据后的回调函数
                        layer.msg('权限展示完成！', {
                            icon: 1,
                            time: 1000
                        });
                    }
                });
            }

            querylist();

            $("#btnSearch").on("click", function () {
                querylist();
            })

            //一般不用，作为参考： 监听 页头 工具栏事件
            table.on('toolbar', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        layer.msg('添加');
                        break;
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑Id：' + checkStatus.data[0].Id);
                        }
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            layer.alert('删除Id：' + checkStatus.data[0].Id);
                            layer.msg('删除');
                        }
                        break;
                };
            });

            //监听 表行 工具栏事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        alert(data.Id);
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('编辑操作:  ' + data.Id);
                    window.location.href = "/permission/PermissionEdit?id=" + data.Id;
                }
                console.log(data)
            });
        });

        function add() {
            window.location.href = "/permission/permissionadd";
        }
    </script>
</body>
</html>
